<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view />

    <div class="dashboard">

      <!-- 统计面板 -->
      <div class="card stats-card">
        <h3>实时统计</h3>
        <p>当前数字：{{ count }}</p>
        <div class="btn-group">
          <button @click="increment">+1</button>
          <button @click="decrement">-1</button>
        </div>
      </div>

      <!-- 父子通信面板 -->
      <div class="card communication-card">
        <h3>消息中心</h3>
        <input v-model="inputValue" placeholder="输入信息发送给父组件" />
        <button @click="sendDataToParent">发送数据</button>
        <p>接收到的数据：{{ messageFromChild }}</p>
      </div>

      <!-- 配置信息面板 -->
      <div class="card config-card">
        <h3>电脑配置</h3>
        <ul>
          <li><strong>CPU:</strong> Intel Core i7</li>
          <li><strong>GPU:</strong> NVIDIA GTX 980Ti</li>
          <li><strong>内存:</strong> Kingston 32GB DDR4</li>
          <li><strong>硬盘:</strong> Samsung SSD 1TB</li>
        </ul>
      </div>

      <!-- 自定义头部面板 -->
      <div class="card header-card">
        <h3>导航栏模拟</h3>
        <div class="header-list">
          <div class="header-item" v-for="(header, index) in headers" :key="index">
            <span>{{ header.txt }}</span>
            <img :src="header.src1" alt="icon1" class="icon" />
            <img :src="header.src2" alt="icon2" class="icon" />
          </div>
        </div>
      </div>

      <!-- 列表项面板 -->
      <div class="card list-card">
        <h3>接收数据列表</h3>
        <div class="list-item" v-for="(msg, index) in listMessages" :key="index">
          接收数据：{{ msg }}
        </div>
      </div>

      <!-- 功能操作面板 -->
      <div class="card action-card">
        <h3>其他操作</h3>
        <button @click="skip">跳转详情页（模拟）</button>
        <button @click="changeData">改变数据</button>
        <p>{{ messageFromChild }}</p>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 计数器数据
      count: 0,

      // 子组件传值模拟
      inputValue: '',
      messageFromChild: '等待接收消息',

      // 图片资源（在 created 中赋值）
      searchIcon: null,
      chatIcon: null,
      userIcon: null,

      // 模拟自定义头部数据（初始为空）
      headers: [],

      // 模拟列表项数据
      listMessages: []
    }
  },
  created() {
    // 使用 require 引入图片资源
    this.searchIcon = require('@/assets/search_icon.png');
    this.chatIcon = require('@/assets/chat.png');
    this.userIcon = require('@/assets/search_user.png');

    // 初始化 headers 数据
    this.headers = [
      { txt: '书影音', src1: this.searchIcon, src2: this.chatIcon },
      { txt: '广播', src1: this.userIcon, src2: this.searchIcon },
      { txt: '小组', src1: this.chatIcon, src2: this.userIcon }
    ];
  },
  watch: {
    count(newVal) {
      this.listMessages = [newVal, this.messageFromChild]
    },
    messageFromChild(newVal) {
      this.listMessages = [this.count, newVal]
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      if (this.count > 0) {
        this.count--
      }
    },
    sendDataToParent() {
      this.messageFromChild = this.inputValue
    },
    skip() {
      alert('跳转详情页')
    },
    changeData() {
      this.messageFromChild = '数据已改变'
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f5f7fa;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
}

.card h3 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
}

.btn-group button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-group button:hover {
  background-color: #2980b9;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.header-list .header-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.header-item span {
  flex: 1;
  font-weight: bold;
}

.icon {
  width: 24px;
  height: 24px;
  margin-left: 10px;
}

.list-item {
  background-color: #e6f7ff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  font-size: 14px;
}

.action-card button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.action-card button:hover {
  background-color: #27ae60;
}
</style>